<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08 demo</title>
    <style>
        body {
            font-size: large;
        }

        #someDiv {
            width: 100px;
            height: 100px;
            background: #ffffff;
            transition: background-color 2s;
            margin: 10px;
        }

        #message {
            margin: 10px;
        }

        #tip {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="message">🌈7色变换，将在两轮后结束变换（14s）</div>
    <div id="someDiv"></div>
    <div id="tip"></div>
    <div style="font-family: kaiti;">请结合源代码理解</div>

    <script>
        var div = document.getElementById('someDiv');
        var tipDiv = document.getElementById('tip');
        var colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; // 彩虹七色
        var colorIndex = 0;
        var rounds = 0;  // 记录轮数
        var totalRounds = 2; // 总轮数为2

        var colorChanger = setInterval(function () {
            div.style.backgroundColor = colors[colorIndex];  // 改变颜色
            colorIndex++;

            tipDiv.textContent = `当前第 ${rounds + 1} 轮`;

            if (colorIndex >= colors.length) {
                colorIndex = 0;
                rounds++;
            }

            // 在两轮之后停止变化
            if (rounds >= totalRounds) {
                clearInterval(colorChanger);  // 停止定时器
                tipDiv.textContent = "变换已完成";
            }
        }, 2000);
    </script>
</body>

</html>